<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/3/10
  Time: 19:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>讨论区主题</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css?20190817.1">
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="/lib/layui/layui/layui.js"></script>
    <style>
        body{
            background-color: #fff;
        }
        .layui-form{
            margin: 0px;
        }
        .layui-form-label{
            width: 100px;
            padding: 9px 0px;
        }
        a{
            color: #1687cb;
        }
        .TableContent{
            background: #f2f2f2;
            border: 1px #dddddd solid;
            border-right: 1px #dddddd solid;
            padding: 3px;
            height: 30px;
        }
        .TableData {
            BACKGROUND: #FFFFFF;
            COLOR: #000000;
        }
        .TableHeader {
            COLOR: #383838;
            FONT-WEIGHT: bold;
            FONT-SIZE: 9pt;
            background: #fff;
            line-height: 40px;
            border-bottom: 1px #dddddd solid;
        }
        table{
            width: 100%;
        }
        .reply tr{
            border: 1px solid  #9F9F9F;
        }
    </style>
</head>
<body>
<div style="padding: 8px">
    <div>
        <button class="layui-btn layui-btn-sm posting" style="margin-left: 20px;margin-top: 10px;">发帖</button>
        <button class="layui-btn layui-btn-sm search" style="margin-left: 20px;margin-top: 10px;">搜索</button>
        <button class="layui-btn layui-btn-sm hotArticles" style="margin-left: 20px;margin-top: 10px;">热门文章</button>
        <button class="layui-btn layui-btn-sm gradeTop" style="margin-left: 20px;margin-top: 10px;">积分榜</button>
        <button class="layui-btn layui-btn-sm check" style="display: none; margin-left: 20px;margin-top: 10px;">帖子审核</button>

        <button class="layui-btn layui-btn-sm" style="margin-left: 20px;margin-top: 10px; float:right;     margin-right: 20px;" name="thisforum">返回本讨论区</button>
        <button class="layui-btn layui-btn-sm" style="margin-left: 20px;margin-top: 10px; float:right;" name="forum">返回讨论区列表</button>
    </div>
    <div style="background-color:#F2F2F2;height: 50px;margin-top: 20px;">
        <button class="layui-btn layui-btn-sm layui-btn-primary" style="margin-left: 20px;margin-top: 10px;" name="del">删除主题</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" style="margin-left: 20px;margin-top: 10px;" name="Transfer">转移主题</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary isTop" style="margin-left: 20px;margin-top: 10px;">置顶/取消置顶</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary isSpirit" style="margin-left: 20px;margin-top: 10px;">加精/取消加精</button>
    </div>
    <table id="demo" lay-filter="demoEvent"></table>
</div>


<script type="application/javascript">
    //从地址获取
    // 获取地址栏参数值
    function getQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }



    var boardId=getQueryString("boardId");
    var isCheck=getQueryString("isCheck");
    var table,layer,form,layedit,laydate;
    var tableIns
    var arr=[]
    var ids

    $(function () {
        $.ajax({
            type: 'post',
            url: '/system/bbs/getDetail',
            dataType: 'json',
            data: {boardId:boardId},
            success: function (rsp) {
                var data=rsp.object;
                var boarName=data.boardHosterName.split(',');
                var username='${userName}';
                if (boarName.indexOf(username)>-1 && data.needCheck==1){
                    $('.check').css('display','inline-block');
                }
            }
        });
    });

    //发帖
    $('.posting').click(function () {
        layer.open({
            type: 2
            ,title: ['发帖', 'font-size:18px;']
            ,maxmin:true
            ,area: ['90%', '90%']
            ,content: '/bbs/allNotice?boardId='+boardId
            ,btn:['保存','关闭']
            ,btnAlign: 'c'
            ,yes: function(index, layero){
                //按钮【按钮一】的回调
                var iframeWin = window[layero.find('iframe')[0]['name']];
                iframeWin.save();
                tableIns.reload()
            }
        });
    })
    //热门文章
    $('.hotArticles').click(function () {
        layer.open({
            type: 2
            ,title: ['热门文章', 'font-size:18px;']
            ,maxmin:true
            ,area: ['90%', '90%']
            ,content: '/bbs/hotArticles?boardId='+boardId
        });
    })
    //积分榜
    $('.gradeTop').click(function () {
        layer.open({
            type: 2
            ,title: ['积分榜', 'font-size:18px;']
            ,maxmin:true
            ,area: ['90%', '90%']
            ,content: '/bbs/gradeTop'
        });
    })

    //返回本讨论区
    $("button[name='thisforum']").click(function(){
        window.location.href="/bbs/theme?boardId="+boardId;
    });

    //返回讨论区列表
    $("button[name='forum']").click(function(){
        window.location.href="/bbs/index";
    });

    //删除主题
    $("button[name='del']").click(function(){
        /*var checkStatus = table.checkStatus('demo'); //idTest 即为基础参数 id 对应的值
        if (checkStatus.data.length===0){
            // layer.msg('要删除主题，请至少选择其中一项。');
            layer.msg('请至少选择一条数据！',{icon:0});
            return false;
        }*/
        if(ids==undefined || ids==''){
            layer.msg('请至少选择一条数据！',{icon:0});
            return false
        }
        layer.confirm('确认要删除所选主题吗？', function(index){
           /* var ids='';
            for (var i=0;i<checkStatus.data.length;i++){
                ids+=checkStatus.data[i].commentId+","
            }*/
            $.post('/bbs/delCom',{commentIds:ids},function(res){
                layer.msg('删除成功！',{icon:1, time: 2000}, function(){
                    table.reload("demo");
                    layer.close(index)
                });
                ids=''
                arr=[]
            });
        });
    });
    //转移主题
    $("button[name='Transfer']").click(function(){
        /*var checkStatus = table.checkStatus('demo').data;
        if(checkStatus.length===0){
            // layer.msg('要转移主题，请至少选择其中一项。', {icon: 6});
            layer.msg('请至少选择一条数据！',{icon:0});
            return false;
        }*/
        if(ids==undefined || ids==''){
            layer.msg('请至少选择一条数据！',{icon:0});
            return false
        }
       /* var str='';
        for (var i=0;i<checkStatus.length;i++){
            str+=checkStatus[i].commentId+',';
        }*/
        layer.open({
            type: 1
            ,area :['400px', '250px']
            ,title: '帖子转移'
            ,content: '<div style="margin-top: 20px;">' +
            '<form class="layui-form" >' +
            ' <div class="layui-inline">\n' +
            '      <label class="layui-form-label">转移至：</label>\n' +
            '      <div class="layui-input-inline">\n' +
            '        <select name="modules" lay-verify="required" lay-search="">\n' +
            '        </select>\n' +
            '      </div>\n' +
            '    </div>' +
            '</form>' +
            '</div>'
            ,btn: ['确定', '取消']
            ,success: function(layero, index){
                $.get('/bbs/Transfer',{boardId:boardId},function(res){
                    if (res.flag){
                        var option='';
                        var obj=res.obj;
                        for (var i=0;i<obj.length;i++){
                            option+='<option value="'+obj[i].BOARD_ID+'">'+obj[i].BOARD_NAME+'</option>';
                        }
                        $('select[name="modules"]').append(option);
                        form.render('select');
                    }
                });
            }
            ,yes: function(index, layero){
                //按钮【按钮一】的回调
                var modul=$('select[name="modules"]').val();
                $.post('/bbs/updateTransfer',{commentId:ids,boardId:modul},function(res){
                    if(res.flag){
                        layer.msg('转移成功!', {icon:1, time: 2000});
                        tableIns.reload();
                        layer.close(index);
                    }
                    ids=''
                    arr=[]
                });
            }
        });
    });
    //置顶、取消置顶
    $('.isTop').click(function () {
        console.log(ids)
        if(ids==undefined || ids==''){
            layer.msg('请至少选择一条数据！',{icon:0});
            return false
        }
        layer.open({
            type: 1
            ,area :['350px', '200px']
            ,title: '是否置顶'
            ,content: '<div style="margin-top: 20px;" class="layui-form" >' +
                ' <div class="layui-form-item">\n' +
                '    <label class="layui-form-label">是否置顶</label>\n' +
                '    <div class="layui-input-block">\n' +
                '      <input type="radio" name="isTopIn" value="1" title="置顶" checked>\n' +
                '      <input type="radio" name="isTopIn" value="0" title="取消置顶" >\n' +
                '    </div>\n' +
                '  </div>'+
                '</div>'
            ,btn: ['确定', '取消']
            ,success: function(layero, index){
                form.render()
            }
            ,yes: function(index, layero){
                $.ajax({
                    url:'/bbs/updatefine',
                    type: "post",
                    dataType: "json",
                    data:{
                        ids:ids,
                        Field:'TOP',
                        status:$('input[name="isTopIn"]:checked').val()
                    },
                    success:function (res) {
                        if(res.flag){
                            layer.msg($('input[name="isTopIn"]:checked').attr('title')+'成功！',{icon:1, time: 2000}, function(){
                                tableIns.reload()
                                layer.close(index)
                            });
                        }
                        ids=''
                        arr=[]
                    }
                })
            }
        });
    })

    //加精、取消加精
    $('.isSpirit').click(function () {
        // console.log(ids)
        if(ids==undefined || ids==''){
            layer.msg('请至少选择一条数据！',{icon:0});
            return false
        }
        layer.open({
            type: 1
            ,area :['350px', '200px']
            ,title: '是否加精'
            ,content: '<div style="margin-top: 20px;" class="layui-form" >' +
                ' <div class="layui-form-item">\n' +
                '    <label class="layui-form-label">是否加精</label>\n' +
                '    <div class="layui-input-block">\n' +
                '      <input type="radio" name="isSpiritIn" value="1" title="加精" checked>\n' +
                '      <input type="radio" name="isSpiritIn" value="0" title="取消加精" >\n' +
                '    </div>\n' +
                '  </div>'+
                '</div>'
            ,btn: ['确定', '取消']
            ,success: function(layero, index){
                form.render()
            }
            ,yes: function(index, layero){
                $.ajax({
                    url:'/bbs/updatefine',
                    type: "post",
                    dataType: "json",
                    data:{
                        ids:ids,
                        Field:'JING',
                        status:$('input[name="isSpiritIn"]:checked').val()
                    },
                    success:function (res) {
                        if(res.flag){
                            layer.msg($('input[name="isSpiritIn"]:checked').attr('title')+'成功！',{icon:1, time: 2000}, function(){
                                tableIns.reload()
                                layer.close(index)
                            });
                            ids=''
                            arr=[]
                        }
                    }
                })
            }
        });
    })


    //搜索
    $('.search').click(function () {
        layer.open({
            type: 1,
            title: '搜索',
            btn:['确定','取消'],
            shade: 0.5,
            maxmin: true, //开启最大化最小化按钮
            area: ['40%', '60%'],
            content:'<div class="layui-form" style="width: 65%;margin-top: 2%;margin-left:10%">' +
            '<div class="layui-form-item">\n' +
            '    <label class="layui-form-label">分类:</label>\n' +
            '    <div class="layui-input-block">\n' +
            '      <select name="type" lay-verify="required">\n' +
            '      </select>\n' +
            '    </div>\n' +
            '  </div>'+
            '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label">标题包含文字:</label>\n' +
            '    <div class="layui-input-block">\n' +
            '      <input type="text" name="subject" required  lay-verify="required"  autocomplete="off" class="layui-input">\n' +
            '    </div>\n' +
            '  </div>'+
            '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label" style="width: 132px;margin-left:-32px">内容或回复包含文字:</label>\n' +
            '    <div class="layui-input-block">\n' +
            '      <input type="text" name="content" required  lay-verify="required" autocomplete="off" class="layui-input">\n' +
            '    </div>\n' +
            '  </div>'+
            '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label">附件包含文字:</label>\n' +
            '    <div class="layui-input-block">\n' +
            '      <input type="text" name="attachmentName" required  lay-verify="required"  autocomplete="off" class="layui-input">\n' +
            '    </div>\n' +
            '  </div>'+
            '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label">发帖日期:</label>\n' +
            '    <div class="layui-input-block" style="display: flex">\n' +
            '      <input type="text" name="startSubmitTime" id="test1" class="layui-input">\n' +
            '<div style="margin: 11px;">至</div>'+
            '      <input type="text" name="endSubmitTime" id="test2" class="layui-input">\n' +
            '    </div>\n' +
            '  </div>'+
            '</div>',
            success:function(){
                $.ajax({
                    url:'/system/bbs/getDetail',
                    type: "post",
                    dataType: "json",
                    data:{boardId:boardId},
                    success:function (res) {
                        var category=res.object.category.split(',')
                        var str=''
                        for(var i=0;i<category.length;i++){
                            str+='<option value="'+category[i]+'">'+category[i]+'</option>'
                        }
                        $('select[name="type"]').html(str)
                        form.render()
                    }
                })
                laydate.render({
                    elem: '#test1' //指定元素
                });
                laydate.render({
                    elem: '#test2' //指定元素
                });
            },
            yes:function () {
                var type=$('select[name="type"]').val()
                var subject=$('input[name="subject"]').val()
                var content=$('input[name="content"]').val()
                var attachmentName=$('input[name="attachmentName"]').val()
                var startSubmitTime=$('input[name="startSubmitTime"]').val()
                var endSubmitTime=$('input[name="endSubmitTime"]').val()
                window.location.href='/bbs/searchResult?boardId='+boardId+'&type='+encodeURI(type)+'&subject='+encodeURI(subject)+'&content='+encodeURI(content)+'&attachmentName='+encodeURI(attachmentName)+'&startSubmitTime='+encodeURI(startSubmitTime)+'&endSubmitTime='+encodeURI(endSubmitTime)
            }
        });
    });

    //帖子审核
    $('.check').click(function () {
        layer.open({
            type: 2
            ,title: ['帖子审核', 'font-size:18px;']
            ,maxmin:true
            ,area: ['90%', '90%']
            ,content: '/bbs/bbsCheck?boardId='+boardId
        });
    });
    function showYn(showYn) {
        if(showYn==1){
            return '<span style="color: red">(已屏蔽)<span style="color: red">'
        }else{
            return ''
        }
    }

    //创建实例对象
    layui.use(['table','layer','form', 'layedit', 'laydate'],function () {
        //引用实例
        table=layui.table,
            form=layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;

        //第一个实例
        tableIns=table.render({
            elem: '#demo'
            ,url: '/bbs/selAllCom' //数据接口
            ,where:{boardId:boardId}
            ,page: true //开启分页
            ,cols: [[ //表头
                {type:'checkbox'}
                ,{field: 'subject', title: '标题', align:"center",event: 'board',templet: function(d){
                        if(d.top==1 && d.jing==1){
                            return '<span style="color: red">'+d.subject+'(精)'+showYn(d.showYn)+''+'</span>'
                        }else  if(d.top==1 && d.jing==0){
                            return '<span style="color: red;">'+d.subject+'</span>'+showYn(d.showYn)+''
                        }else  if(d.top==0 && d.jing==1){
                            return '<span style="color: #1687cb;">'+d.subject+'<span style="color: red">(精)'+showYn(d.showYn)+'</span>'+'</span>'
                        }else  if(d.top==0 && d.jing==0){
                            return '<span style="color: #1687cb;">'+d.subject+'</span>'+showYn(d.showYn)+''
                        }
                    }}
                ,{field: 'authorName', title: '作者', align:"center"}
                ,{field: 'deptName', title: '部门',align:"center"}
                ,{field: 'textNums', title: '字节', align:"center"}
                ,{title: '回/阅', align:"center" ,event: 'lasthair'
                    ,templet:function (d){
                        return '<a class="answer" commentId='+d.commentId+'>'+d.replyCont+'</a>'+"/"+'<a class="haveRead" commentId='+d.commentId+'>'+d.readCont+'</a>';
                    }
                }
                ,{field:"lastReply", title: '最后回复', align:"center"}
            ]]
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0 //解析接口状态
                    ,"data": res.obj //解析数据列表
                    ,"count": res.totleNum
                };
            }
            ,done:function (de) {
                $('.answer').click(function () {
                    var commentId=$(this).attr('commentId')
                    $.ajax({
                        url:'/bbs/selectById',
                        type: "get",
                        dataType: "json",
                        data:{id:commentId},
                        success:function (res) {
                            var data=res.object.Child
                            layer.open({
                                type: 1,
                                title: '查看帖子回复',
                                area: ['600px', '460px'],
                                content:
                                '<table class="reply"><tbody>' +
                              function () {
                                    var str=''
                                    for(var i=0;i<data.length;i++){
                                        str +=  '<tr class="append_tr" style="background: #D9EDF7;height: 40px;">'+
                                            '<td colspan="2" style="padding-left: 10px;"> ' +
                                            '<span style=" margin-right: 20px;">作者姓名：'+data[i].authorName+'</span>' +
                                        '<span style=" margin-right: 20px;">部门：'+data[i].authorName+'</span> ' +
                                        '<span style=" margin-right: 20px;">'+data[i].oldSubmitTime+'</span>' +
                                        '</td>'+
                                        '</tr>'+
                                        '<tr style="background: #fff;height: 80px">'+
                                        '<td colspan="2" style="padding-left: 10px;">'+'<div style="font-weight: bold;margin: 15px 0px">'+data[i].subject+'</div>'+
                                        '<p>'+data[i].content+'</p>' +
                                        '</td>'+
                                        '</tr>'
                                    }
                                    return str
                              }()
                                +'</tbody></table>'
                            });
                        }
                    })
                })
                $('.haveRead').click(function () {
                    var commentId=$(this).attr('commentId')
                    $.ajax({
                        url:'/bbs/getChDeptfq',
                        type: "get",
                        dataType: "json",
                        data:{id:commentId},
                        success:function (res) {
                            var data=res.obj
                            layer.open({
                                type: 1,
                                title: '帖子已阅人员',
                                area: ['600px', '460px'],
                                content:
                                '<table><tbody>' +
                                '<tr class="TableHeader">' +
                                '<td align="center" nowrap width="30%">部门/成员单位</td>' +
                                '<td align="center" nowrap>已读人员</td>' +
                                '</tr>' +
                                function () {
                                    var str=''
                                    for(var i=0;i<data.length;i++){
                                        if(data[i].child==''||data[i].child==undefined){
                                            str+= '<tr class="TableData"><td class="TableContent">├'+data[i].deptName+'</td>' +
                                            '<td>'+validation(data[i].map.admin)+'</td></tr>'
                                        }else {
                                            for(var j=0;j<data[i].child.length;j++){
                                                str+= '<tr class="TableData"><td class="TableContent">&emsp;├'+data[i].child[j].deptName+'</td>' +
                                                    '<td>'+validation(data[i].child[j].map.admin)+'</td></tr>'

                                            }
                                        }
                                    }
                                    return str
                                }()+
                                '</tbody></table>'
                            });
                        }
                    })

                })
            }
        });
        //监听单元格事件
        table.on('tool(demoEvent)', function(obj){
            var data = obj.data;
            if(obj.event === 'board'){
                window.location.href="/bbs/article?commentId="+data.commentId+'&boardId='+boardId+'&isCheck='+isCheck;
            }else if(obj.event === 'lasthair'){
            }
        });

        //复选框
        table.on('checkbox(demoEvent)', function(obj){
            if(obj.type=='one'){
                if(obj.checked){
                    arr.push(obj.data.commentId)
                }else{
                    removeWithoutCopy(arr,obj.data.commentId)
                }
            }else{
                var datas = table.checkStatus('demo').data;
                if(obj.checked){
                    for(var i=0,length=datas.length;i<length;i++){
                        arr.push(datas[i].commentId);
                    }
                } else {
                    datas = table.cache.demo;
                    for(var i=0,length=datas.length;i<length;i++){
                        removeWithoutCopy(arr,datas[i].commentId);
                    }
                }
            }
            ids=arr.join()
        });
    });

    //移除数组 arr 中的所有值与 item 相等的元素，直接在给定的 arr 数组上进行操作，并将结果返回
    function removeWithoutCopy(arr, item) {
        var num = arr.length;
        for(var i = 0; i < num; i++){
            if(arr[i] == item ){
                arr.splice(i,1);
            }
        }
        return arr;
    }

    function layertrue(flag) {
        if (flag) {
            layer.msg('成功', {icon: 6}, function(){
                layer.closeAll();
            });
        } else {
            layer.msg('失败', {icon: 5},function(){
                layer.closeAll();
            });
        }
    }
    function validation(num) {
        if(num==undefined){
            return ''
        }else{
            return num
        }
    }
</script>
</body>
</html>
